/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


$.mp = {
    map:{},
    markers:[],
    init: function(){
        google.maps.event.addDomListener(window, 'load', initialize);
    },
    mapLoaded: function(){
        $.mp.addMarker();
    },
    addMarker: function(){
         var position = new google.maps.LatLng(51.508742,-0.122566);
         var position1 = new google.maps.LatLng(51.37454,-0.055389);
         var position2 = new google.maps.LatLng(51.41454,-0.085389);
         var position3 = new google.maps.LatLng(51.67454,-0.155389);
         var position4 = new google.maps.LatLng(51.77454,-0.055389);
         var position5 = new google.maps.LatLng(51.408742,-0.122566);
         var position6 = new google.maps.LatLng(51.558742,-0.122566);
         var position7 = new google.maps.LatLng(51.588742,-0.122566);
         var position8 = new google.maps.LatLng(51.528742,-0.122566);
         var position9 = new google.maps.LatLng(51.518742,-0.122566);
         addMarker(position,$.mp.map);
         addMarker(position1,$.mp.map);
         addMarker(position2,$.mp.map);
         addMarker(position3,$.mp.map);
         addMarker(position4,$.mp.map);
         addMarker(position5,$.mp.map);
         addMarker(position6,$.mp.map);
         addMarker(position7,$.mp.map);
         addMarker(position8,$.mp.map);
         addMarker(position9,$.mp.map);
         $.mp.markerCluster();
    },
    markerCluster: function(){
        var iconBase = 'http://leapdemo.com/public/icons/map/';
        var mcOptions = {
            styles: [{
                height: 18,
                url: iconBase+"m1.png",
                width: 18,
                textColor: 'white'
            },
            {
                height: 22,
                url: iconBase+"m2.png",
                width: 23,
                textColor: 'white'
            },
            {
                height: 23,
                url: iconBase+"m3.png",
                width: 23,
                textColor: 'white'
            },
            {
                height: 23,
                url: iconBase+"m4.png",
                width: 23,
                textColor: 'white'
            },
            {
                height: 27,
                url: iconBase+"m5.png",
                width: 27,
                textColor: 'white'
            },
            {
                height: 31,
                url: iconBase+"m6.png",
                width: 31,
                textColor: 'white'
            },
            {
                height: 40,
                url: iconBase+"m7.png",
                width: 40,
                textColor: 'white'
            }]
            }
        var markerCluster = new MarkerClusterer($.mp.map, $.mp.markers,mcOptions);
    }
}
function initialize() {
        
        var style = new google.maps.LatLng(51.508742,-0.122566);

        var stylez = [
            {
                featureType: "all",
                elementType: "all",
                stylers: [
                    { "hue": "#ff0000" }, { "saturation": -100 }
                ]
            }
        ];

        var mapOptions = {
            zoom: 7,
            center: style,
            disableDefaultUI: true,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'leap']
            }
        };

        $.mp.map = new google.maps.Map(document.getElementById("leapMap"), mapOptions);

        var mapType = new google.maps.StyledMapType(stylez, {name:"Grayscale"});    
        $.mp.map.mapTypes.set('leap', mapType);
        $.mp.map.setMapTypeId('leap');
        $.mp.mapLoaded();
   
      }
      function addMarker(position,map) {
            var iconBase = 'http://leapdemo.com/public/icons/map/';
            var marker = new google.maps.Marker({
                position: position,
                icon: iconBase+"spot_dot.png",
                image:"",
                title:"this roof gap",
                type:"roof"
            });
            marker.setMap(map);
            $.mp.markers.push(marker);
            var infoW = "<div class='infoWindow'><span class='mapArrow'></span><div class='wHeader'><span class='wTitle'>"+marker.title+"</span><span class='wIcon'><img src='http://leapdemo.com/public/icons/map/roof.png' /></span></div><div class='wimage'><img src='http://leapdemo.com/public/pictures/roof.jpg' width='250'  height='150'/></div></div>";

            var myOptions = {
                 content: infoW
                ,disableAutoPan: false
                ,maxWidth: 250
                ,pixelOffset: new google.maps.Size(-140, 0)
                ,zIndex: null
                ,boxStyle: { 
                  background: "#fff"
                  ,width: "250px"
                  ,margin:"30px 0 0 0"
                 }
                ,closeBoxURL: ""
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: true
                ,pane: "floatPane"
                ,enableEventPropagation: false
        };

        marker.ib = new InfoBox(myOptions);
        marker.ib.open(map, marker);
        
            google.maps.event.addListener(marker, 'click', function() {
                map.panTo(marker.getPosition());
                
                $.each($.mp.markers,function(){
                    if(!this.ib.isHidden_ && this.ib !== marker.ib)
                        this.ib.hide();
                })
                if(marker.ib.isHidden_)
                    marker.ib.show();
                else
                    marker.ib.hide();
            });

      }

      